<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <script>
        var html = document.getElementsByTagName('html')[0];
        html.style.fontSize = html.clientWidth / 3.75 + "px";
    </script>
    <title>支付</title>
    <link rel="stylesheet" href="../static/css/Reset.css">
    <link rel="stylesheet" href="../libs/swiper/swiper.min.css">
    <link rel="stylesheet" href="../static/css/lianlianPay.css" />
</head>
<body>
    <div class="lianlianPay" id="lianlianPay" v-cloak>
        <div class="payOrderDetail">
            <div class="payOrderNum">
                <span class="payOrderNumLeft">订单编号</span>
                <span class="payOrderNumRight" v-cloak>{{data.orderNo}}</span>
            </div>
            <div class="payOrderTotal">
                <span class="payOrderTotalLeft">实付总额</span>
                <span class="payOrderTotalRight" v-cloak>{{data.amount}}元</span>
            </div>
        </div>
        <div class="spacing"></div>
        <div class="payer">
            <div class="payerName">
                <span class="payNameLeft">姓名*</span>
                <input type="text" class="payNameRight" v-model="payNameRight" placeholder="请填写您本人的实名认证信息">
            </div>
            <div class="payerIdNum">
                <span class="payerIdNumLeft">身份证号*</span>
                <input type="text" class="payerIdNumRight" v-model="payerIdNumRight" placeholder="请填写您本人的实名认证信息">
            </div>
        </div>
        <div class="payBank">
            <div class="payBankAccount">
                <span class="payerBankNumLeft">银行卡号*</span>
                <input type="tel" class="payerBankNumRight" @blur="queryCardBin" v-model="payerBankNumRight" placeholder="仅支持您本人名下的银行储蓄卡">
            </div>
        </div>
        <div class="msgMain">
        	<div v-if="queryCardBin.limit == false" class="errorMsg">*不支付该银行卡</div>
	        <div v-if="queryCardBin.limit == true" class="successMsg">{{queryCardBin.bankName}} {{queryCardBin.cardType}}<br />限额:{{queryCardBin.perLimit}}万/笔;{{queryCardBin.dayLimit}}万/日;{{queryCardBin.monthLimit}}万/月</div>
	        <div class="camera" id="selectCard" @click="selectCard">常用银行</div>
        </div>
	    <div class="remarkSubmite" v-on:click="remarkSubmite">提交</div>
	    
	    <!--选择银行卡-->
		<section id="areaLayer" class="express-area-box">
		    <article id="areaBox">
		        <ul id="areaList" class="area-list">
		        	<li v-for="authUser in authUserListData" v-bind:id="authUser.id" v-on:click="selectBankNo($event)" v-cloak>
						{{authUser.bankCardNo}}
					</li>
		        </ul>
		    </article>
		</section>
		<!--遮罩层-->
		<div id="areaMask" class="mask" @click="cloaseSelectCard"></div>
		<div id="jumpFormDiv" style="display:none;"></div>
    </div>
</body>
<script src="https://api.map.baidu.com/api?v=2.0&ak=1BiZDIdoRV9iryDNcdF4oU37pqwftOin&s=1"></script>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../libs/fastclick.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue.min.js"></script>
<script type="text/javascript" src="../libs/vue/vue-resource.min.js"></script>
<script type="text/javascript" src="../libs/require.js"></script>
<script type="text/javascript" src="../libs/var.js"></script>
<script type="text/javascript" src="../libs/common.js"></script>
<script type="text/javascript" src="./js/lianlianPay.js"></script>
</html>